<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>登录日志</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<style type="text/css">
		
			/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}
			.el-main {
				padding: 4px;
			}
			.el-icon-search{
				color: #409EFF;
			}
			.el-icon-refresh-right{
				color: #409EFF;
			}
		</style>
	</head>

	<body>
		<el-container id="app">
			<el-main>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
					size="mini" style="height: 36px">
					<el-form-item label="工号">
						<el-input v-model="queryData.userName" placeholder="请输入工号"></el-input>
					</el-form-item>
					<el-form-item label="时间">
						<el-date-picker v-model="queryData.beginTime" type="date" placeholder="选择开始日期"
							value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-date-picker v-model="queryData.endTime" type="date" placeholder="选择结束日期"
							value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button size="mini"  icon="el-icon-search" @click="searchEvent('queryData',1)">查询
						</el-button>
						<el-button size="mini"  icon="el-icon-refresh-right" @click="searchEvent('queryData',0)">重置
						</el-button>
					</el-form-item>
				</el-form>


				<vxe-grid border stripe ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
					@page-change="handlePageChange" :height="tableHeight" size="mini" class="checkbox-table"
					:checkbox-config="{ trigger: 'row'}" :pager-config="tablePage" :data="logData"
					:loading="tableLoading"  :export-config="tableExport" :header-cell-style="{'text-align':'center'}"
					@toolbar-button-click="toolbarButtonClickEvent">
					<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
					<vxe-table-column type="seq" title="序号" width="150"  align="right">
					</vxe-table-column>
					<vxe-table-column field="logId" title="日志编号" width="250"  align="center"
						:visible="visible">
					</vxe-table-column>
					<vxe-table-column field="userName" title="用户工号" width="200"  align="left">
					</vxe-table-column>
					<vxe-table-column field="logTime" title="登录时间" width="400"  align="right">
					</vxe-table-column>
					<vxe-table-column field="logIp" title="登录IP" width="500"  align="right">
					</vxe-table-column>
				</vxe-grid>

			</el-main>
		</el-container>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var main = {
				data() {
					return {
						fileList: [],
						desc: '',
						value8: false,
						setExcel: [],
						flag: 1,
						ExcelData: [],
						value5: false,
						loading: false,
						disabled: false,
						visible: false,
						uplodadisabled:true,
						tableHeight: '100%',
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 15,
							align: 'left',
							pageSizes: [15, 30, 45, 60, 75, 90],
							layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
								'Total'
							],
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							 buttons: [
							{
								code: 'importnew',
								name: '导入',
								status: 'perfect',
								icon: 'fa fa-file-excel-o vxe-info-color'
							},
							{
								code: 'importfile',
								name: '导入',
								status: 'perfect',
								icon: 'fa fa-file-excel-o vxe-info-color'
							}
							],
							refresh: {
								icon: 'fa fa-refresh',
								iconLoading: 'fa fa-spinner fa-spin'
							},
							zoom: {
								iconIn: 'fa fa-arrows-alt',
								iconOut: 'fa fa-expand'
							},
							custom: {
								icon: 'fa fa-cog',
								storage: true,
								checkMethod: this.checkColumnMethod
							}
						},
						tableExport: {
							filename: 'export',
							sheetName: 'Sheet1',
							type: 'xlsx',
							// 自定义类型
							types: ['xlsx', 'csv', 'html', 'xml', 'txt']
						},
						submitLoading: false,
						queryData: {
							logId: "",
							userName: "",
							loginTime: "",
							logIp: "",
							beginTime: "",
							endTime: ""
						},
						logData: [],
						tableLoading: false,
						logTypeOptions: [],
						logResultCodeOptions: [],
						uplodaData:'',
						uplodAction:curl+'/file/upload'
					}
				},
				created() {
					this.findList();
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
				},
				methods: {
					cellClassName ({ row, rowIndex, column, columnIndex }) {
					   if (column.property === 'stateName') {
					         if (row.state=='1') {
					           return 'col-red'
					        } else if (row.state=='5') {
					            return 'col-orange'
					       }
					   }
					},
					//获取列表信息
					findList() {
						this.tableLoading = true;
						let params = Object.assign({
							page: this.tablePage.currentPage,
							rows: this.tablePage.pageSize,
							beginTime: this.queryData.beginTime,
							endTime: this.queryData.endTime,
							keyword: this.queryData.userName,
						});
						var object = this;
						webApi("/log/listLoginLog", "post", params, function(data) {
							object.logData = data.data.rows;
							object.tablePage.total = data.data.total;
							object.tableLoading = false;
						}, function() {
							object.tableData = [];
							object.tablePage.total = 0
							object.tableLoading = false;
						});
					},
					batchRemove() {
						var rows = this.$refs.xGrid.getCheckboxRecords();
						if (rows.length <= 0) {
							this.$XModal.message({
								message: '请选择需要删除的记录',
								status: 'error'
							});
							return false;
						}
						this.$XModal.confirm(`您确定要把当前选中的数据删除吗?`).then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let params = Object.assign(rows);
								//console.info(params);
								XEAjax.bodyType = "form-data";
								XEAjax.post(`${curl}/log/batchRemove`, params).then(data => {
									if (data.code == 200) {
										this.$refs.xGrid.commitProxy('reload');
										this.$XModal.message({
											message: data.msg,
											status: 'success'
										});
									} else {
										this.$XModal.message({
											message: data.msg,
											status: 'error'
										});
									}
								});
								this.submitLoading = false;
							}
						});
					},
					removeEvent(row) {
						this.$XModal.confirm('您确定要删除该数据?').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let params = Object.assign(row);
								XEAjax.post(`${curl}/log/delete`, params).then(data => {
									if (data.code == 200) {
										this.$refs.xGrid.commitProxy('reload');
										this.$XModal.message({
											message: data.msg,
											status: 'success'
										});
										this.showEdit = false;
									} else {
										this.$XModal.message({
											message: data.msg,
											status: 'error'
										});
									}
								});
								this.submitLoading = false;
							}
						});
					},
					queryChange() {
						this.$refs.xGrid.commitProxy('reload');
					},
					//分页
					handlePageChange({
						currentPage,
						pageSize
					}) {
						this.tablePage.currentPage = currentPage
						this.tablePage.pageSize = pageSize
						this.findList()
					},
					searchEvent(formName, acType) {
						if (acType == 0) {
							this.queryData = {
								keyword: "",
								beginTime: "",
								endTime: ""
							}
							this.findList();
						}
						this.tablePage.currentPage = 1;
						this.findList();
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
					},
					//导入
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'btnRemove':
								this.batchRemove();
								break;
							case 'btnExport':
								this.$refs.xGrid.exportData({
									filename: '日志列表',
									sheetName: 'Sheet1',
									type: 'xlsx'
								});
								break;
							case 'importfile':
								this.value8 = true;
								break;
						}
					},
					checkColumnMethod({
						column
					}) {
						if (['logType', 'logResultCode'].includes(column.property)) {
							return false
						}
						return true
					},
				}
			};

			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>

</html>
